<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
		<title></title>
	    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
	    <script src="bootstrap-3.3.7-dist/js/jquery-2.1.4.min.js"></script>
	    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	<style type="text/css">
		header{
			margin: 20px auto 0;
			width: 498px;
			padding: 0;
		}
		h3{
			padding: 20px;
			margin: 0;
		}
		main{
			margin: 10px auto;
			width: 498px;
		}
		main>div{
			border: 1px solid #ccc;
			padding: 10px 20px;
		}
		footer{
			width: 498px;
			margin: 20px auto 0;
			border: 1px solid #efefef;
		}
		footer .alert{
				margin: 0;
			}
	</style>
	</head>
	<body>
		<header class="bg-primary">
			<h3>作息规律测试</h3>
		</header>
		<main>
			<div>
				<div class="dropdown">
					<h4>第一题：<small>是否有坚持每天吃早餐的习惯</small></h4>
					<button type="button" class="btn" data-toggle="dropdown">
						请选择<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li class="dropdown-header">
							<a href="#">有</a>
						</li>
						<li class="divider"></li>
						<li class="dropdown-header">
							<a href="#">没有</a>
						</li>
					</ul>
				</div>
				
				<div class="dropdown">
					<h4>第二题：<small>是否有熬夜的习惯</small></h4>
					<button type="button" class="btn" data-toggle="dropdown">
						请选择<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li class="dropdown-header">
							<a href="#">没有</a>
						</li>
						<li class="divider"></li>
						<li class="dropdown-header">
							<a href="#">有</a>
						</li>
					</ul>
				</div>
				
				<div class="dropdown">
					<h4>第三题：<small>是否有吃水果的习惯</small></h4>
					<button type="button" class="btn" data-toggle="dropdown">
						请选择<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li class="dropdown-header">
							<a href="#">有</a>
						</li>
						<li class="divider"></li>
						<li class="dropdown-header">
							<a href="#">没有</a>
						</li>
					</ul>
				</div>
				
			</div>
		</main>
		
		<footer class="bg-primary">
			<h3>自检结果</h3>
		</footer>
	</body>
	<script type="text/javascript">
		$(function(){
			var answer1='<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert">&times;</button>习惯很好！大多数研究都表明，早餐能降低血液中血小板和血液中胆固醇的含量，从而降低患心血管疾病的风险。 </div>';
			var answer2='<div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" >&times; </button>习惯不好！如果大脑不能从早餐中获得足够的营养，它将拒绝工作，或者放慢工作的速度。 </div> ';
			var answer3='<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" >&times; </button>习惯很好！许多调查研究资料均表明，健康长寿的老年人均有一个良好而正常的睡眠。 </div> ';
			var answer4='<div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" >&times; </button>习惯不好！熬夜会让内分泌激素水平紊乱，使得细胞代谢异常，影响人体细胞正常分裂，导致细胞突变，提高患癌风险。 </div> ';	
			var answer5='<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" >&times; </button>习惯很好！水果中含丰富的抗氧化物质维生素E和微量元素，可以减缓衰老、预防疾病。 </div> ';
			var answer6='<div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert">&times; </button>习惯不好！不吃水果将会缺少很多人体必须的营养物质。 </div> ';
			
			$("li").click(function(){
				if($("li").index(this)==0){//判断点击的是第几个li元素
					$("footer").append(answer1);//追加警告信息
				}
				if($("li").index(this)==2){
					$("footer").append(answer2);
				}
				if($("li").index(this)==3){
					$("footer").append(answer3);
				}
				if($("li").index(this)==5){
					$("footer").append(answer4);
				}
				if($("li").index(this)==6){
					$("footer").append(answer5);
				}
				if($("li").index(this)==8){
					$("footer").append(answer6);
				}
				
				$(this).addClass("disabled").unbind();//已选案例添加禁用样式及取消事件
				$(this).siblings(".dropdown-header").addClass("disabled").unbind();
				//已选题目其他答案添加禁用样式及取消事件
			})
			
		})
	</script>
</html>
